<script type="text/javascript">
var activePanel = false;

$(document).ready(function(){
    $(".panel").toggleClass("inactive");
    
	$(".option").click(function(){
        var id = $(this).attr('id');
        if ("#"+id+".panel" == activePanel) {
            $("#"+id+".panel").hide("slow");
            activePanel = false;
        } else { 
            $(".panel").toggleClass("active").hide();
            $("#"+id+".panel").show("slow");
            activePanel = "#"+id+".panel";
        }
	});
    
    
    //for saving the current project
    $("#save_now").click(function(){
        var data = {};
        data['Nodes'] = Nodes;
        data['rootId'] = rootId;
        data['maxDepth'] = maxDepth;
        data['leafNodes'] = leafNodes;
        data['nodeDepths'] = nodeDepths;
        data['TREE_TYPE'] = TREE_TYPE;
        data['NODE_RADIUS'] = NODE_RADIUS;
        data['stepX'] = stepX;
        data['stepY'] = stepY;
        data = JSON.stringify(data);
        params =  {key:key,tree:data}
        $.post('/tree/save', params, function(newkey) {
            if (newkey==key){
                $(".panel").hide("slow",function(){
                    activePanel = false;
                });
                $('#Tree_Saved').fadeIn('slow', function() {
                    $('#Tree_Saved').fadeOut('slow');
                });
            } else {
                $(location).attr('href','/tree/edit?k='+newkey);
            }
        });
    });
});
</script>

<div id="footer">
	<div id="footer_content">
    {% if user %}
        <div id="save_now" >Save Now</div>
    {% else %}  
		<div class="option" id="aa">
				Save Tree
		</div>
    {% endif %}  
		<div class="option" id="bb">
				Output Image
		</div>
		<div class="option" id="cc">
				Embed Tree
		</div>
		<div class="option" id="dd">
				GeoPhylo
		</div>
		<div class="clear"></div>
	</div>

    <div id="panels">
        <div class="panel" id="aa">
            <div id="panel_content">
                <p>
                    WARNING: You are not signed in. Without being logged it, you will not be 
                    able to return to edit this exact tree. You  still can save the phylogeny, 
                    however you will only get a new key for you to view it and share with others. 
                </p><p>
                    <a href="{{ url }}">Sign In.</a>
                </p><p>
                    or 
                </p><p>
                    <div id="save_now" >Go Ahead and Save It</div>
                </p>
            </div>
        </div>
        <div class="panel" id="bb">
            <div id="panel_content">
                Img Output Stuff
            </div>
        </div>
        <div class="panel" id="cc">
            <div id="panel_content" >
            {% if tmp %}
                <p>
                You must save your tree first.
                </p><p>
                <div id="save_now" >Save It</div>
                </p>
            {% else %}
                <div id="inlineCodeBlocks">
                    <div id="title">Embed in most webpages:</div>
                    <pre class="embedCode" id="html">
                        
&lt;div width="400" 
     height="385"
     style="width:400px;height:385px;"
     id="phylobox_perm783d06b1-e040-4c94-bf18-8a35bda8ea00"
     class="phylobox_embed_parent"&gt;&lt;a href="http://phylobox.appspot.com"&gt;&lt;img src="http://phylobox.appspot.com/static/images/widget/holder_425.png" width="375" height"344" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;script type="text/javascript" src="http://phylobox.appspot.com/static/javascript/WidgetControllers/latest/InsertWidget.js"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;if (PHYLOBOX) PHYLOBOX.renderPhylo();&lt;/script&gt;&lt;noscript&gt;Sorry, we haven't spent much time with IE, maybe that is why you are not seeing anything here?&lt;/noscript&gt;
                    </pre>
                    <br>
                    <div id="title">Embed in your Blogspot blog*:</div>
                    <pre class="embedCode" id="blogger">
                    
&lt;div id="PhyloboxEmbed" &gt; 
    &lt;div width="375" height="344" style="width:375px;height:344px;" id="phylobox_permff669fcf-250d-459f-a00f-f31e56f666d2" class="phylobox_embed_parent"&gt;&lt;a href="http://phylobox.appspot.com"&gt;&lt;img src="http://phylobox.appspot.com/static/images/widget/holder_425.png" width="375" height"344" /&gt;&lt;/a&gt;
    &lt;/div&gt; 
&lt;/div&gt; 
                    </pre>
                </div>
                <div id="footnote">
                    * If this is the first time you've embedded a PhyloBox widget in Blogger, you need to install our widget first, <a target="_blank" href="/help/blogger" >Click Here</a>
                </div>
                {% endif %}
            </div>
        </div>
        <div class="panel" id="dd">
            <div id="panel_content">
                GeoPhylo Stuff
            </div>
        </div>
    </div>
    <div id="Tree_Saved">Tree Saved</div> 
</div>
